<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      #box {
        height: 140px;
        width: 400px;
        border: 1px solid #cccccc;
        color: hotpink;
        overflow: hidden;
        margin: 50px auto;
        text-align: center;
      }
    </style>
  </head>

  <body>
    <div id="box">
      <ul id="ul1">
        <li>1111111111111111111111</li>
        <li>2222222222222222222222</li>
        <li>3333333333333333333333</li>
        <li>4444444444444444444444</li>
        <li>5555555555555555555555</li>
        <li>6666666666666666666666</li>
        <li>7777777777777777777777</li>
        <li>8888888888888888888888</li>
        <li>9999999999999999999999</li>
      </ul>
      <ul id="ul2"></ul>
    </div>
    <script>
      window.onload = roll(50)

      // 传入的 t 为滚动快慢的时间
      function roll(t) {
        let ul1 = document.getElementById('ul1')
        let ul2 = document.getElementById('ul2')
        let box = document.getElementById('box')
        ul2.innerHTML = ul1.innerHTML //这一句很关键，此效果的实现是通过ul1和ul2之间的相互切换实现的无缝滚动效果，如果这一句没有将ul1中的内容追加到ul2中，将不会实现元素的循环滚动
        // 初始化滚动高度
        box.scrollTop = 0
        let timer = setInterval(rollStart, t)
        box.onmouseover = function () {
          clearInterval(timer)
        }
        box.onmouseout = function () {
          timer = setInterval(rollStart, t)
        }
      }

      function rollStart() {
        if (box.scrollTop >= ul1.scrollHeight) {
          box.scrollTop = 0
        } else {
          box.scrollTop++
        }
      }
    </script>
  </body>
</html>
